<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" xmlns="http://java.sun.com/jsf/html">
<head>
    <meta charset="UTF-8">
    <title>自助报表-使用手册</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/layui/css/layui.css">
    <style>
        .title{
            padding-left:30px;
            padding-top: 20px;
        }
        body {
            color: #393D49;
        }

        #content {
            font-size: 15px;
            font-family: initial;
        }

        #content ol li{
            font-size: 15px;
        }

        #content a {
            color: #1E9FFF;
        }
        .layui-tree-skin-treeStyle{
            font-family: initial;
        }
    </style>
</head>
<script src="<%=request.getContextPath()%>/plugins/layui/layui.js"></script>
<body>
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a style="font-size: 18px;">自助报表使用手册</a>
        </li>
    </ul>
    <div width="100%" style="padding-left: 100px; padding-right: 100px;">
        <div style="height:600px;float: left; width: 20%; position:fixed;padding-top:10px;overflow:auto">
            <ul id="tree"></ul>
        </div>
        <div id="content" style="float: left; width: 70%; margin-left: 350px; height:70%; padding-bottom: 150px;">
            <h1>开始使用</h1>
            <hr>
            <blockquote class="layui-elem-quote">
                <p>
                    使用自助报表工具进行报表的开发可简化报表的开发过程、提高开发效率；报表修改后实时生效，无需重启项目；
                    本文档用于说明如何使用报表工具进行报表的新增、修改等操作，通过阅读本文档，用户可参照相关步骤完成报表的开发。
                </p>
            </blockquote>

            <h1 id="dbManage">数据源管理</h1>
            <hr>
            <blockquote class="layui-elem-quote">
                报表工具支持多数据源，在配置报表前先查看报表对应的数据源在报表工具中是否已经存在，如果不存在则需要新增数据源，
                点击新增配置按钮，进入新增数据源页面，如下图所示：
            </blockquote>
            <img src="<%=request.getContextPath()%>/docImg/dbcfg_1.jpg" width="100%" />
            <hr>
            <img src="<%=request.getContextPath()%>/docImg/dbCfg_2.jpg" width="100%" />
            <hr>
            <blockquote class="layui-elem-quote">
                数据库名称、数据库类型、数据库URL、数据库用户、数据库密码必填，目前自助报表工具仅支持oracle和mySql两种类型的数据库，
                <b>数据库名称不能重复</b>
            </blockquote>
            <br>
            <br>

            <h1 id="addReport">新增报表</h1>
            <hr>
            <blockquote class="layui-elem-quote">
                进入自助报表工具后，点击新增报表按钮即进入新增报表界面；新增报表必须填写报表名称、报表使用的数据源，
                必须上传报表表头和报表配置文件，接入系统非必选；如下图所示：
            </blockquote>
            <img src="<%=request.getContextPath()%>/docImg/addRpt_1.jpg" width="100%" />
            <hr>
            <img src="<%=request.getContextPath()%>/docImg/addRpt_2.jpg" width="100%" />
            <blockquote class="layui-elem-quote">
                上传的报表表头为Excel文件<b>(仅支持xlsx格式)</b>，Excel头和报表的表头对应，支持复杂表头、表头支持换行；如下图所示，
                图一为最终生成的报表，图二为表头对应的Excel头：
            </blockquote>
            <img src="<%=request.getContextPath()%>/docImg/addRpt_3.jpg" width="100%" />
            <hr>
            <img src="<%=request.getContextPath()%>/docImg/addRpt_4.jpg" width="100%" />
            <hr>
            <blockquote class="layui-elem-quote">
                报表表头上传成功后会出现下载报表配置模板的链接，点击该链接下载报表对应的配置文件，编辑配置文件完成报表的配置，
                配置方式参照&nbsp;<a href="<%=request.getContextPath()%>/rptTools/rptMgr/doc" target="_blank">配置说明</a>&nbsp;
                配置文件编辑好后上传，点击生成报表按钮，即完成一张报表的开发；如下图所示：<br/>
                <b><font color="red">注：下载下来的配置模板中，column中name属性的值无需修改；column的顺序不能改变，如果需要新增column在已有的column后新增即可</font></b>
            </blockquote>
            <img src="<%=request.getContextPath()%>/docImg/addRpt_5.jpg" width="100%" />

            <h1 id="editReport">修改报表</h1>
            <hr>
            <blockquote class="layui-elem-quote">
                在报表列表页面选择需修改的报表，下载报表配置文件，如果需要修改表头，还需要下载表头Excel,
                然后点击修改报表链接，进入修改报表页面，在该页面可修改报表名称、报表数据源、报表接入系统，并将
                修改后的报表表头和报表配置文件上传，点击修改报表完成报表的修改，如下图所示：
            </blockquote>
            <img src="<%=request.getContextPath()%>/docImg/editRpt_1.jpg" width="100%" />
            <hr>
            <img src="<%=request.getContextPath()%>/docImg/editRpt_2.jpg" width="100%" />

            <h1 id="accessSys">接入系统管理</h1>
            <hr>
            <blockquote class="layui-elem-quote">
                报表配置完成后需要挂到相关的系统上，自助报表工具提供了接入系统管理的功能，报表配置接入系统主要是为了
                提高了报表访问的安全性，接入系统的配置包括系统名称和系统代码，其中系统代码不能重复且只能由字母或数字组成，
                系统Token是为了进一步条报表的访问安全性，生成系统Token后需要将该Token提供给接入系统，并且通过接入系统访问
                报表时需要将Token的值传给报表工具，<b>参数名为token</b>，使用方法如下图所示：<br>
                <b>注：只有管理员才有权限配置接入系统，如需添加接入系统请联系管理员操作；</b><br>
                <b>注：当报表需要使用离线下载和自定义报表功能时，必须配置报表的接入系统且接入系统需提供相关的服务供报表工具调用；</b><br>
                <b>注：当报表配置了接入系统后，无法通过报表链接在浏览器中直接访问，报表必须通过接入系统才可以访问；</b>
            </blockquote>
            <img src="<%=request.getContextPath()%>/docImg/accessIn_1.jpg" width="100%" />
            <hr>
            <img src="<%=request.getContextPath()%>/docImg/accessIn_2.jpg" width="100%" />

        </div>
    </div>

    <script>
        layui.use(['code','util','tree'], function(){
            layui.code({
                //encode: true,
                about: false,
                title: '示例配置',
                skin: 'notepad'
            });

            var util = layui.util;
            //固定块
            util.fixbar({});

            layui.tree({
                elem: '#tree',
                skin: 'treeStyle',
                nodes: [{
                    name: '数据源管理',
                    href: '#dbManage'
                },{
                    name: '新增报表',
                    href: '#addReport'
                },
                {
                    name: '修改报表',
                    href: '#editReport'
                },
                {
                    name: '接入系统管理',
                    href: '#accessSys'
                }
                ]
            });
        });
    </script>
</body>
</html>